<template>
<div class="box">
    <div class="left">
        <ul>
            <li class="aa">潮玩饰品<div class="raiu bb"></div></li>
            <li>APM<div class="raiu"></div></li>
            <li>DW<div class="raiu"></div></li>
            <li>施华洛世奇<div class="raiu"></div></li>
            <li>阿玛尼腕表<div class="raiu"></div></li>
            <li>梵高腕表<div class="raiu"></div></li>
            <li>潮流手办<div class="raiu"></div></li>
            <li>钥匙扣<div class="raiu"></div></li>
            <li>潮流箱包<div class="raiu"></div></li>
            <li>潮流礼品<div class="raiu"></div></li>
        </ul>
    </div>
    <div class="right cc">
        <ul>
            <li v-for="(shipins,index) in shipin" :key="index">
                <img :src="shipins.goodsImg" @click="xiangqing(shipins.id)">
                <div class="jieshao">
                    <div class="r-1">{{shipins.goodsName}}</div>
                    <div class="r-2">{{shipins.property}}</div>
                    <div class="r-3">
                        <div class="r-31">￥{{shipins.goodsLowPrice}}</div>
                        <div class="r-32">￥{{shipins.goodsHighPrice}}</div>
                    </div><br>
                    <p>已售卖{{shipins.saleNumber}}件</p>
                    <div class="r-4"><span class="iconfont icon-gouwuche1"></span></div>
                </div>
            </li>
        </ul>
        <div class="bottom">●没有更多啦~&nbsp;○</div>
    </div>
    <div class="right">
        <ul>
            <li v-for="(APMs,index) in APM" :key="index">
                <img :src="APMs.goodsImg" @click="xiangqing(APMs.id)">
                <div class="jieshao">
                    <div class="r-1">{{APMs.goodsName}}</div>
                    <div class="r-2">{{APMs.property}}</div>
                    <div class="r-3">
                        <div class="r-31">￥{{APMs.goodsLowPrice}}</div>
                        <div class="r-32">￥{{APMs.goodsHighPrice}}</div>
                    </div><br>
                    <p>已售卖{{APMs.saleNumber}}件</p>
                    <div class="r-4"><span class="iconfont icon-gouwuche1"></span></div>
                </div>
            </li>
        </ul>
        <div class="bottom">●没有更多啦~&nbsp;○</div>
    </div>
    <div class="right">
        <ul>
            <li v-for="(DWs,index) in DW" :key="index">
                <img :src="DWs.goodsImg" @click="xiangqing(DWs.id)">
                <div class="jieshao">
                    <div class="r-1">{{DWs.goodsName}}</div>
                    <div class="r-2">{{DWs.property}}</div>
                    <div class="r-3">
                        <div class="r-31">￥{{DWs.goodsLowPrice}}</div>
                        <div class="r-32">￥{{DWs.goodsHighPrice}}</div>
                    </div><br>
                    <p>已售卖{{DWs.saleNumber}}件</p>
                    <div class="r-4"><span class="iconfont icon-gouwuche1"></span></div>
                </div>
            </li>
        </ul>
        <div class="bottom">●没有更多啦~&nbsp;○</div>
    </div>
    <div class="right">
        <ul>
            <li v-for="(SHs,index) in SH" :key="index">
                <img :src="SHs.goodsImg" @click="xiangqing(SHs.id)">
                <div class="jieshao">
                    <div class="r-1">{{SHs.goodsName}}</div>
                    <div class="r-2">{{SHs.property}}</div>
                    <div class="r-3">
                        <div class="r-31">￥{{SHs.goodsLowPrice}}</div>
                        <div class="r-32">￥{{SHs.goodsHighPrice}}</div>
                    </div><br>
                    <p>已售卖{{SHs.saleNumber}}件</p>
                    <div class="r-4"><span class="iconfont icon-gouwuche1"></span></div>
                </div>
            </li>
        </ul>
        <div class="bottom">●没有更多啦~&nbsp;○</div>
    </div>
    <div class="car"><span class="iconfont icon-gouwuche1"></span></div>  
</div>
</template>
<script>
import axios from "axios"
export default {
    data(){
        return {
            shipin:[],
            APM:[],
            DW:[],
            SH:[],
        }
    },
    methods:{
        xiangqing(goodid){
            this.$router.push("/Goods2/"+goodid)

        }
    },
        mounted(){
        var oLi =document.querySelectorAll('li')
        var oRu =document.querySelectorAll('.raiu')
        var oDiv = document.querySelectorAll('.right')
            for(var i=0;i<oLi.length;i++){
                oLi[i].index=i
                oLi[i].onclick=function(){
                for(var j=0;j<oRu.length;j++){
                    oLi[j].style.background='#efefef'
                    oRu[j].style.display='none'
                }
                for(var m=0;m<oDiv.length;m++){
                    oDiv[m].style.display='none'
                }
                this.style.background='white'
                oRu[this.index].style.display='block'
                oDiv[this.index].style.display='block'
            }
        }
    },
    created(){
        // console.log(1);
        axios({
            url:"/api/goods/findGoodsByType",
            params:{
                typeId:13
            }, 
        })
        .then(res=>{
            if(res.data.code=='1'){
                // console.log('查询成功');
                this.shipin=res.data.data
                // console.log(res.data.data)
            }else{
                // console.log('查询失败');
            }
        }),
        axios({
            url:"/api/goods/findGoodsByType",
            params:{
                typeId:14
            }, 
        })
        .then(res=>{
            if(res.data.code=='1'){
                // console.log('查询成功');
                this.APM=res.data.data
                // console.log(res.data.data)
            }else{
                // console.log('查询失败');
            }
        }),
        axios({
            url:"/api/goods/findGoodsByType",
            params:{
                typeId:15
            }, 
        })
        .then(res=>{
            if(res.data.code=='1'){
                // console.log('查询成功');
                this.DW=res.data.data
                // console.log(res.data.data)
            }else{
                // console.log('查询失败');
            }
        }),
                axios({
            url:"/api/goods/findGoodsByType",
            params:{
                typeId:16
            }, 
        })
        .then(res=>{
            if(res.data.code=='1'){
                // console.log('查询成功');
                this.SH=res.data.data
                // console.log(res.data.data)
            }else{
                // console.log('查询失败');
            }
        })
    },
}
</script>
<style scoped>
@import url("../assets/font_2735397_jcfueec7nca/iconfont.css");
.box{
    height: 6.4rem;
    background-color: #fff;
}
.left{
    width: 0.77rem;
    height: 6rem;
    margin-top: 0.4rem;
    position: fixed;
    left: 0;
    background-color: #efefef;
}
.left ul li{
    height: 0.42rem;
    text-align: center;
    line-height: 0.42rem;
    font-size: 0.1rem;
    position: relative;
}
.right{
    width: 2.83rem;
    background-color: #fff;
    float: right;
    margin-top: 0.4rem;
    display: none;
}
.right ul{
    background-color: #fff;
}
.right ul li{
    width: 2.74rem;
    margin-left: 0.09rem;
    margin-top: 0.19rem;
    height: 0.83rem;
    background-color: #fff;
}
img{
    width: 1.10rem;
    height: 0.83rem;
    float: left;
    border-radius: 0.04rem;
}
.jieshao{
    width: 1.42rem;
    height: 0.83rem;
    float: right;
    margin-right: 0.14rem;
}
.r-1{
    font-size: 0.14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.r-2{
    font-size: 0.1rem;
    color: #c0c0c0;
    margin-top: 0.1rem;
}
.r-3{
    margin-top: 0.03rem;
}
.r-31{
    color: #e03300;
    font-size: 0.12rem;
    float: left;
}
.r-32{
    color: #c0c0c0;
    font-size: 0.09rem;
    float: left;
    margin-top: 0.04rem;
    text-decoration: line-through;
}
p{
    display: block;
    width: 1rem;
    float: left;
    font-size: 0.1rem;
    color: #878787;
}
.r-4{
    width: 0.18rem;
    height: 0.18rem;
    float: right;
    border-radius: 50%;
    background-color: #e63900;
    font-size: 0.1rem;
    color: #fff;
    line-height: 0.18rem;
    margin-right: 0.05rem;
}
.bottom{
    font-size: 0.12rem;
    color: #878787;
    text-align: center;
}
.raiu{
    width: 0.09rem;
    height: 0.18rem;
    background-color: #ebecfa;
    position: absolute;
    top: 0.05rem;
    border-bottom-right-radius: 50%;
    border-top-right-radius: 50%;
    display: none;
}
.car{
    width: 0.3rem;
    height: 0.3rem;
    float: right;
    border-radius: 50%;
    background-color: #3d2d99ca;
    font-size: 0.1rem;
    color: #fff;
    line-height: 0.3rem;
    text-align: center;
    margin-right: 0.05rem;
    position: fixed;
    right: 0.1rem;
    bottom: 2.25rem;
    z-index: 99;
}
.aa{
    background-color: #fff;
}
.bb{
    display: block;
}
.cc{
    display: block;
}
</style>